import  { Component } from 'react';
import propTypes from 'prop-types'

// imrc ,ccc
// class 类，Component组件 extends基础 constructor构造函数 super调用父构造函数，
// state状态 render渲染  return返回 step步进器
// this.setState 继承Component的方法 在类组件中实现更新视图
// 在模板中获取状态 this.state.xxx
class Step extends Component {
  constructor(props) {
    super(props);
    // console.log("constructor 构造函数 挂载-01")
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    // console.log("getDerivedStateFromProps 通过props更新state 挂载-02")
    console.log("getDerivedStateFromProps 通过props更新state 更新-01")
    return prevState;
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate 组件是否更新 更新-02")
    return true;
  }
  // 定义更新num的方法
  setNum = (v)=>{
    console.log(v);
    this.props.onChange(v);
  }
  // 定义响应式数据num
  state = { num:1 }
  render() { 
    // console.log("render 渲染 挂载-03")
    console.log("render 渲染 更新-03")
    // 简写num
    const num = this.props.num;
    const step = this.props.step;
    return ( <div>
      {/* props.chilren获取到插槽内容 */}
      {this.props.children}
      <button onClick={()=>this.setNum(num-step)}>-</button>
      <input 
      onChange={e=>this.setNum(e.target.value*1)}
      value={num}/>
      <button  onClick={()=>this.setNum(num+step)}>+</button>
    </div> );
  } 
  componentDidMount() {
    // console.log("componentDidMount 组件已经挂载 挂载-04")
  }
  getSnapshotBeforeUpdate(){
    console.log("getSnapshotBeforeUpdate 更新前获取快照 更新-04")
    // 返回的值是下一个生命周期第三个参数
    return {name:"mumu",age:18}
  }
  componentDidUpdate(prevProps, prevState,snap) {
      console.log("componentDidUpdate 组件已经更新 更新-05",snap)
    
  }
  componentWillUnmount(){
    console.log("componentWillUnmount 组件将要卸载 卸载-01")
  }
  
}
 
 export {Step}
// 设置step组件props的默认值
 Step.defaultProps={
  step:1,//步长
  num:1  //数值
 }
//  定义props的类型
 Step.propTypes={
  step:propTypes.number,  //数字类型
  num:propTypes.number.isRequired, //数字必填
  onChange:propTypes.func, //函数
  children: propTypes.oneOfType([  //有一个
    propTypes.string,//字符串
    propTypes.element //元素节点
  ])
 }
 
// 挂载阶段
// 01 constructor 构造函数
// 02 static getDerivedStatefromProps porps更新
// 03 render 渲染方法
// 04 componentDidMount 组件已经挂载完毕
// > ajax 请求，事件监听，dom操作